<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>糯米医院</title>
    <link href="/NmHosp/static/img/nuomi.ico" rel="shortcut icon">
    <link rel="stylesheet" href="./component/element-ui/index.css">
    <link rel="stylesheet" href="./component/common/css/nmMain.css">
    <style>
        [v-cloak]{
            display: none;
        }
        .el-collapse {
            border-top: 0;
        }
        .el-collapse-item__header{
            border-bottom: 0;
        }
    </style>
</head>
<body class="text-shadow">
<div id="app" v-cloak>
    <div class="top-bar bg-white">
        <div class="top-logo" style="padding-left: calc( 50% - 590px );">
            <img width="50px" height="50px" src="./img/nuoMi.png" />
            <div style="padding-left: 10px;">
                <span style="color:#ff9c0a;">糯 </span><span class="text-blue">米 </span><span style="color: white;text-stroke: 1px black;">医 院</span>
            </div>

        </div>
        <div class="v-flex v-c-center" style="padding-right: calc( 50% - 590px );">
            <el-avatar size="medium" :src="'/NmHosp/static/img/'+(user?'nuoMi.png':'unknow.png')"></el-avatar>
            <div class=" text-shadow text-blue" style="padding-left: 15px;">{{ user? (user.nickName+'['+getUserType(user.type)+']'):'未注册' }}</div>

        </div>
    </div>

    <div class="tab-list" style="padding-left: calc( 50% - 590px );">
        <div  class="tab-item"  >首页</div>
    </div>

    <div style="width: 1180px;margin-left: calc( 50% - 590px );">
        <div class="l-block-top" style="width: 813px;margin:10px 5px;">
            <div class="bg-white padding-10" style="min-height: calc( 100vh - 160px );margin-left: 0;" >

                <el-collapse value="1" style="border-top: 0;">
                    <el-collapse-item title="医院简介" name="1">
                        <div v-if="item.type == 1" v-for="item in pushList">{{item.content}}</div>
                    </el-collapse-item>
                </el-collapse>

                <el-collapse value="1" style="border-top: 0;">
                    <el-collapse-item title="就医指南" name="1">
                        <div v-if="item.type == 2" v-for="item in pushList">{{item.content}}</div>
                    </el-collapse-item>
                </el-collapse>

                <div class="text-bold text-15 margin-b margin-t"><span class="margin-l">医师阵容</span></div>
                <div class="v-flex" style="flex-wrap: wrap;width: 100%;max-height: 300px;overflow-x: hidden;">
                    <div  @click="listenPage(item.id)" class="v-flex v-r-left" v-for="item in hotList" style="width: 245px;margin: 8px;">
                        <div style="width: 100px;height: 130px;">
                            <img :src="picPath+item.pic" width="100px" height="138px"/>
                        </div>
                        <div class="text-12 bookItem">
                            <div class="">{{item.realName}}</div>
                            <div class=""><span class="text-gray">科室:</span>{{item.nmHospSub.groupName}}</div>
                            <div class=""><span class="text-gray">职称:</span>{{item.job}}</div>
                            <div class="text-ellipsis-3 "><span class="text-gray">简介:</span>{{item.memo}}</div>
                            <div class=""><span class="text-gray">坐诊时间:</span>{{item.workTime}}</div>
                        </div>
                    </div>
                </div>
<!--                <div class="v-flex v-r-center">-->
<!--                    <div>-->
<!--                        <span v-if="page!=1" class="padding-10 text-blue hover-green" @click="getBookList(-1)">上一页</span>-->
<!--                        <span class="padding-10">{{page}}</span>-->
<!--                        <span v-if="next" class="padding-10 text-blue hover-green" @click="getBookList(1)">下一页</span>-->
<!--                    </div>-->

<!--                </div>-->

            </div>
        </div>
        <div class="l-block-top" style="width: 338px;margin: 10px 5px;">

            <div class="bg-white margin-b padding-20" style="height: 95px;">
                <div v-if="!user" class="v-flex v-c-center v-r-center" style="height: 100%;">
                    <el-form label-position="left" label-width="60px" size="mini">
                        <el-form-item label="用户名">
                            <el-input
                                    size="mini"
                                    placeholder="请输入用户名"
                                    suffix-icon="el-icon-user"
                                    v-model="nick">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input
                                    size="mini"
                                    placeholder="请输入密码"
                                    suffix-icon="el-icon-set-up"
                                    type="password"
                                    v-model="pass">
                            </el-input>
                        </el-form-item>
                        <div class="v-flex v-r-center">
                            <div style="margin-right: 50px;">
                                <el-button size="mini" type="primary" @click="login">登录</el-button>
                            </div>
                            <el-button @click="resign" size="mini">注册</el-button>
                        </div>

                    </el-form>
                </div>

                <div v-if="user">
                    <div class="v-flex v-r-between padding-10">
                        <div class="v-flex v-r-left">
                            <el-avatar :src="'/NmHosp/static/img/'+(user?'nuoMi.png':'unknow.png')"></el-avatar>
                            <div>
                                <div v-if="user" class="text-shadow text-blue" style="padding-left: 15px;">{{user.nickName}}</div>
                                <div v-if="user" class="text-shadow text-green text-12" style="padding-left: 15px;">{{ getUserType(user.type) }}</div>
                            </div>
                        </div>
                        <div style="line-height: 40px;">
                            <div v-if="user" @click="changeInfo" class="text-shadow text-green text-12" >修改信息</div>
                        </div>
                        <div style="line-height: 40px;">
                            <div v-if="user" @click="logOut" class="text-shadow text-red text-12" >退出登录</div>
                        </div>
                    </div>
                    <div class="v-flex v-r-between padding-10">
                        <div class="text-gray"><span class="padding-l text-yellow"></span></div>
                        <div class="text-gray"><span class="padding-l text-yellow"></span></div>
                        <div @click="jumpManager" class="text-blue">{{user.type==3?'个人中心':'管理中心'}}</div>
                    </div>
                </div>
            </div>

            <div class="bg-white margin-b" style="padding:10px;">
                <div class="text-blue">公告</div>

                <el-collapse value="-1" style="border-top: 0;" accordion>
                    <el-collapse-item v-if="item.type==0" v-for="(item,index) in pushList" :title="item.title" :name="index">
                        <div>{{item.content}}</div>
                    </el-collapse-item>
                </el-collapse>

            </div>

            <div class="bg-white" style="padding:10px;">
                <div class="text-bold text-15 margin-b"><span class="margin-l">医院科室</span></div>
                <div v-if="index<20" class="border-b list-item" v-for="(item,index) in typeList" :kay="index" >
                    <div>
                        <i class="el-icon-office-building text-blue text-middle"></i>
                        <span class="text-blue">{{item.groupName}}</span>
                    </div>
                    <div @click="getOrder(item)"><span class="text-10" class="text-yellow">挂号</span></div>
                </div>

            </div>


        </div>
    </div>

<!--    <el-dialog title="用户注册" :visible.sync="showRe">-->
<!--        <el-form>-->
<!--            <el-form-item label="用户名" >-->
<!--                <el-input v-model="nickName" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="密码" label-width="120px">-->
<!--                <el-input v-model="pass1" type="password" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="重复密码" label-width="120px">-->
<!--                <el-input v-model="pass2" type="password" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->

<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--            <el-button @click="showRe = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="resignSub">确 定</el-button>-->
<!--        </div>-->
<!--    </el-dialog>-->

    <el-dialog  title="用户注册" :visible.sync="showRe">
        <el-form :model="addUser">
            <el-form-item label="用户名" >
                <el-input v-model="addUser.nickName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="真实姓名" >
                <el-input v-model="addUser.realName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-select style="width: 100%;" v-model="addUser.sex" clearable filterable placeholder="请选择">
                    <el-option label="男"
                               value="1">
                    </el-option>
                    <el-option label="女"
                               value="0">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年龄" >
                <el-input v-model="addUser.age" type="number" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" >
                <el-input v-model="pass1" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重复密码" >
                <el-input v-model="pass2" type="password" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="resignSub">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog v-if="user" title="挂号预约" :visible.sync="showOrder">
        <el-form :model="order">

            <el-form-item label="就诊人">
                <el-select style="width:100%" @change="changeSub" v-model="order.userId" clearable filterable placeholder="请选择就诊人">
                    <el-option
                            :label="user.realName+'(本人)'"
                            :value="user.uid">
                    </el-option>
                    <el-option
                            v-for="item in userList"
                            :key="item.uid"
                            :label="item.realName"
                            :value="item.uid">
                    </el-option>
                </el-select>
            </el-form-item>

<!--            <el-form-item label="用户名" >-->
<!--                <el-input :readonly="true"  v-model="order.nickName" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="真实姓名" >-->
<!--                <el-input :readonly="true"  v-model="order.realName" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->

            <el-form-item label="挂号科室名">
                <el-select style="width:100%" @change="changeSub" v-model="order.subId" clearable filterable placeholder="请选择科室">
                    <el-option
                            v-for="item in typeList"
                            :key="item.groupName"
                            :label="item.groupName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="预约医师">
                <el-select style="width:100%" @change="changeDoc" v-model="order.docId" clearable filterable placeholder="请选择医师">
                    <el-option v-if="item.sub == order.subId"
                            v-for="item in hotList"
                            :key="item.realName"
                            :label="item.realName+ '-'+ item.job+  '-(值班时间：'+item.workTime+')'"
                            :value="item.uid">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="挂号费(医师10元，主任医师30元)" >
                <el-input  v-model="order.orderPrice" :readonly="true"  placeholder="医师(普通号)10元，主任医师(专家号)30元" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="预约日期(请在所选医师值班时间范围内选择)" >
            <el-date-picker style="width:100%" format="yyyy-MM-dd HH:mm"
                    v-model="order.orderTime"
                    type="datetime"
                    placeholder="预约日期">
            </el-date-picker>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showOrder = false">取 消</el-button>
            <el-button type="primary" @click="addOrder">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
            title="支付"
            :visible.sync="pay"
            width="30%">
        <span>请支付挂号费</span>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="pay = false;showOrder=false;">完成模拟支付</el-button>
  </span>
    </el-dialog>

</div>

<script src="./component/vue/vue.js"></script>
<script src="./component/element-ui/index.js"></script>
<script src="./component/axios/axios.min.js"></script>
<script type="module">
    import common from "./component/common/commonData.js";

    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                pay:false,
                showOrder:false,
                order:{


                },
                user:false,
                showRe:false,
                showFed:false,
                fed:[0,0,0,0],
                userItem:{
                    allCollect:[],
                    allHis:[],
                    allStar:[],
                    allBook:[]
                },
                typeList:[],
                selType:0,
                hotList:[],
                bookList:[],
                title:"",
                dataView:{},
                tableData: [],
                userInfo:{},
                showMapSel:false,
                selObj:{},
                selName:"",
                activeIndex: '1',
                activeIndex2: '1',
                tabText:"",
                text:"",
                nick:"",
                pass:"",
                pushList:[],
                picPath:common.urlMap.getPic,
                reNick:'',
                pass1:"",
                pass2:"",
                commentText:'',
                page:1,
                limit:9,
                next:true,
                showAdd:"",
                addUser:{
                    nickName:"",
                    realName:"",
                    age:"",
                    sex:"",
                    type:3,
                    pic:'nuoMi.png',
                    validFlag:1
                },
                userList:[],
                timeRange:[]
            };
        },
        mounted() {

        },
        methods: {
            onShow(){

            },onLoad(){
                this.text = "" ;
                this.getGroupList();
                this.getTopBar();
                this.getDoctor();
                this.user = common.getUserInfo();
                if(this.user){
                    this.getUserData();
                }
            },
            changeInfo(){
                this.addUser = this.user;
                this.pass1 = "";
                this.pass2 = "";
                this.showRe = true;
            },
            changeTab(index,item){
                this.selType = index;
                this.getBookList(0);
            },getUserType(type){
                switch (type) {
                    case 1:
                        return "管理员";
                        break;
                    case 2:
                        return "医生";
                        break;
                    case 3:
                        return "患者";
                        break;
                }
            },getGroupList(){
                let _this = this;
                common.request({
                    data: {
                        validFlag:1
                    },
                    url: common.urlMap.findNmHospSubList,
                    success: function(res) {
                        if(res.data.code == 200){
                            _this.typeList = res.data.data;
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })
            },login(){
                if(this.nick == "" || this.pass == ""){
                    common.err("请填写用户ID和密码");
                    return;
                }
                let _this = this;
                common.request({
                    headers:{
                        'content-type': 'application/x-www-form-urlencoded',
                    },
                    data: {
                        nick:_this.nick,
                        pass:window.btoa(_this.pass)
                    },
                    url: common.urlMap.login,
                    success: function(res) {
                        if(res.data.code == 200){
                            try {
                                _this.user = res.data.data;
                                _this.getUserData();
                                localStorage.setItem('userInfo', JSON.stringify(res.data.data));
                                _this.getUserData();
                            } catch (e) {
                                _this.user = "";
                                localStorage.removeItem("userInfo");
                            }
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })

            },getUserData(){
                let _this = this;
                common.request({
                    loading:false,
                    url: common.urlMap.getUserData,
                    success: function(res) {
                        if(res.data.code == 200){
                            if(res.data.data){
                                _this.userItem = res.data.data;
                            }
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })
            },logOut(){
                localStorage.removeItem("userInfo");
                this.user = false;
                common.request({
                    url: common.urlMap.logout
                });
            },jumpManager(){
                if(this.user.type == 1){
                    window.location.href="/NmHosp/static/pages/index.html";
                }else if(this.user.type == 2){
                    window.location.href="/NmHosp/static/pages/index2.html";
                }else{
                    location.href = "./view/manager/myInfo.html" ;
                }
            },getTopBar(){
                let _this = this;
                common.request({
                    data: {
                        validFlag:1
                    },
                    url: common.urlMap.findNmInfoList,
                    success: function(res) {
                        if(res.data.code == 200){
                            _this.pushList = res.data.data;
                        }else {
                            common.err(res.data.msg);
                        }
                    },
                    fail: function(res) {
                        common.err("网络异常");
                    }
                })
            },getDoctor(){
                let _this = this;
                common.request({
                    data: {
                        validFlag:1,
                        type:2
                    },
                    url: common.urlMap.findSysUserList,
                    success: function(res) {
                        if(res.data.code == 200){
                            _this.hotList = res.data.data;
                        }else {
                            common.err(res.data.msg);
                        }
                    }
                })
            },
            getTypeName(typeId){
                for(let i =0;i<this.typeList.length;i++){
                    if(this.typeList[i].id == typeId){
                        return this.typeList[i].groupName;
                    }
                }
                return "";
            },
            listenPage(id){
                window.location.href="./view/manager/bookItem.html?id="+id;
            },
            resign(){
                this.reNick = "";
                this.pass1 = "";
                this.pass2 = "";
                this.showRe = true;
            },resignSub(){
                this.addUser.nickName = this.addUser.nickName.replace(/\s/g,"");

                if(!this.addUser.nickName||!this.pass1||!this.pass2){
                    common.err("请填写完整");
                    return;
                }

                if(this.pass1!=this.pass2){
                    common.err("两次密码不一致");
                    return;
                }

                if(this.pass1.length >12 || this.pass1.length <6){
                    common.err("密码长度应为6-12位");
                    return;
                }

                this.addUser.password = btoa(this.pass1);
                let _this = this;
                if(this.addUser.uid){

                    common.request({
                        url: common.urlMap.editSysUser,
                        data: this.addUser,
                        success: function (res) {
                            common.msg(res.data.msg);
                            if (res.data.code == 200) {
                                common.msg("修改成功");
                                _this.showRe = false;
                            }
                        },
                        fail: function (res) {
                            common.err("网络异常");
                        }
                    })

                }else{

                    common.request({
                        headers:{
                            'content-type': 'application/x-www-form-urlencoded',
                        },
                        data:{data:JSON.stringify(this.addUser)} ,
                        url: common.urlMap.regist,
                        success: function(res) {
                            if(res.data.code == 200){
                                common.msg("注册成功，请登录");
                                _this.showRe = false;
                            }else {
                                common.err(res.data.msg);
                            }
                        },
                        fail: function(res) {
                            common.err("网络异常");
                        }
                    })

                }


            },addOrder(){

                var textArr = ["realName","nickName","subId","docId","orderPrice","orderTime"];
                for(var key in this.order){
                    if(!this.order[key] && textArr.indexOf(key) > -1){
                        common.err("请填写完整");
                        return;
                    }
                }

                if(this.order.orderTime.getTime() < new Date().getTime()){
                    common.err("预约时间应晚于当前时间");
                    return;
                }

                var cutDate = this.order.orderTime.Format('yyyy-MM-dd');

                var begin = new Date(cutDate +" " +this.timeRange[0]);
                var end = new Date(cutDate +" " +this.timeRange[1]);

                if(this.order.orderTime.getTime() > end.getTime() || this.order.orderTime.getTime() < begin.getTime()){
                    common.err("预约时间不在医师值班时间内");
                    return;
                }
                this.order.orderTime = this.order.orderTime.Format('yyyy-MM-dd hh:mm');

                let _this = this;
                common.request({
                    loading: false,
                    url: common.urlMap.addNmOrder,
                    data: this.order,
                    success: function (res) {
                        common.msg(res.data.msg);
                        if (res.data.code == 200) {
                           _this.pay = true;
                        }
                    },
                    fail: function (res) {
                        common.err("网络异常");
                    }
                })
            },getOrder(item){
                var _this = this;
                if(!this.user){
                    common.err("挂号前请登录");
                    return;
                }

                this.order = {
                    realName:_this.user.realName,
                    nickName:_this.user.nickName,
                    title:"挂号预约",
                    state:"0",
                    type:"0",
                    subId:item.id,
                    docId:"",
                    orderPrice:10,
                    creater:_this.user.uid,
                    validFlag:1,
                    orderTime:new Date(),
                    userId:"",
                }
                this.showOrder = true;

                common.request({
                    loading: false,
                    url: common.urlMap.findSysUserList,
                    data: {
                        validFlag:1,
                        type:4,
                        pid:this.user.uid
                    },
                    success: function (res) {
                        //common.msg(res.data.msg);
                        if (res.data.code == 200) {
                            _this.userList = res.data.data;
                        }
                    },
                    fail: function (res) {
                        common.err("网络异常");
                    }
                })

            },changeSub(e){
                this.order.docId = "";

            },changeDoc(e){
                var emp = "";
                this.hotList.map(function(item){
                    if(item.uid == e){
                        emp = item;
                    }
                });
                if(emp){
                    this.order.orderPrice = emp.job == '医师' ? 10 : 30;
                }
                this.orderTime = new Date(new Date().Format("yyyy-MM-dd") + " "+emp.workTime.split("-")[0]);
                this.timeRange = emp.workTime.split("-");
            }
        }
    })
    window.onpageshow = app.onShow();
    window.onload = app.onLoad();
    Date.prototype.Format =  function (fmt) {  // author: meizz
        var o = {
            "M+":  this.getMonth() + 1,  // 月份
            "d+":  this.getDate(),  // 日
            "h+":  this.getHours(),  // 小时
            "m+":  this.getMinutes(),  // 分
            "s+":  this.getSeconds(),  // 秒
            "q+": Math.floor(( this.getMonth() + 3) / 3),  // 季度
            "S":  this.getMilliseconds()  // 毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, ( this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for ( var k  in o)
            if ( new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    </script>
    <style>

        body{
            background-color: #f3f3f3;
        }
        .tab-item:hover{
            background-color: #3f80de;
        }
        .tab-item{
            padding: 15px;
            color: white;
        }
        .tab-sel{
            background-color: #3f80de;
        }
        .tab-list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background-color: #409EFF;
        }

        .top-bar{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
        }
        .top-logo{
            display: flex;
            align-items: center;
            font-size: 30px;
            color: #E6A23C;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }

        .bookItem{
            width: 140px;
            height: 138px;
            padding-left: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
        }

        .list-item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            height: 24px;
        }

        .el-carousel__item div {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .el-form-item--mini{
            margin-bottom: 10px !important;
        }

    </style>
</body>
</html>